<template>
    <div class="hello">
      <MyTable
        :tableTitle="MKTitle"
        :tableData="marketList"
        :page="pages"
        :isMerge="true"
        :mergeName="projectName"
        @getPageTable="getList"
        @getSize="getList"
        :mutiSelect ="mutiSelect"
        :key="tableKey"
      />
    </div>
  </template>
   
  <script>
  import MyTable from '@/components/Table/MyTable'
  export default {
    name: 'HelloWorld',
    components: {
      MyTable
    },
    data () {
      return {
        tableKey: 0,//table的key值
        marketList: [],
        MKTitle: [//表头数据
          { label: '项目', prop: '', columns: [{ label: '', prop: 'price', isGroup: 'project' }, { label: '', prop: 'type', isGroup: 'project' }], },
          { label: '单位', prop: 'unit' },
          {
            label: '本期', prop: 'period', formatter: (row) => {
              return row.period < 609 ? `<i style="color:red;font-style:normal;">${row.period}</i>` : `${row.period}`
            }
          },
          { label: '上期', prop: 'prePeriod' },
          { label: '环比', prop: "chainRatio", },
          {
            label: '样本量(%)', prop: '', columns: [{ label: '总量', prop: 'total' }, {
              label: '占比', prop: 'percentage', render: (h, params) => {
                return h('el-tag', {
                  props: { type: params.row.percentage > '15%' ? 'success' : params.row.percentage <= '0.6%' ? 'danger' : 'info' } // 组件的props
                }, params.row.percentage)
              }
            }]
          },
        ],
        MKList: [],//表格数据
        pages: {//分页数据
          curPage: 1, // 分页-当前页
          limit: 10,
          total: 0,
        },
        mutiSelect:false,
        projectName:['price','type'], //'price' ||  ['price','type']数组或字符串皆可
      }
    },
    created () {
      this.getList()
    },
    methods: {
      getList () {
        this.marketList = [//表格数据
          {
            "id":"1212121",
            "price": "中长期",
            "type": "5500V",
            "unit": "元/吨",
            "period": 675.1,
            "prePeriod": 671.6,
            "chainRatio": 3.5,
            "total": 79.8,
            "percentage": "15%"
          },
          {
            "id":"1212121",
            "price": "中长期",
            "type": "5000V",
            "unit": "元/吨",
            "period": 609.1,
            "prePeriod": 608.6,
            "chainRatio": 0.5,
            "total": 165.2,
            "percentage": "36.6%"
          },
          {
            "id":"1212121",
            "price": "中长期",
            "type": "4500V",
            "unit": "元/吨",
            "period": 554.1,
            "prePeriod": '',
            "chainRatio": '',
            "total": 2.5,
            "percentage": "0.6%"
          },
          {
            "id":"1212121",
            "price": "现货",
            "type": "5500V",
            "unit": "元/吨",
            "period": 675.1,
            "prePeriod": 671.6,
            "chainRatio": 3.5,
            "total": 79.8,
            "percentage": "15%"
          },
          {
            "id":"1212121",
            "price": "现货",
            "type": "5000V",
            "unit": "元/吨",
            "period": 609.1,
            "prePeriod": 608.6,
            "chainRatio": 0.5,
            "total": 165.2,
            "percentage": "36.6%"
          },
          {
            "id":"1212121",
            "price": "周综合",
            "type": "5500V",
            "unit": "元/吨",
            "period": 554.1,
            "prePeriod": '',
            "chainRatio": '',
            "total": 2.5,
            "percentage": "0.6%"
          },
          {
            "id":"1212121",
            "price": "周综合",
            "type": "5000V",
            "unit": "元/吨",
            "period": 554.1,
            "prePeriod": '',
            "chainRatio": '',
            "total": 2.5,
            "percentage": "0.6%"
          },
          {
            "id":"1212121",
            "price": "权重指数",
            "type": "5000V",
            "unit": "点",
            "period": 554.1,
            "prePeriod": '',
            "chainRatio": '',
            "total": 2.5,
            "percentage": "0.6%"
          },
        ]
        this.pages.total = 3;
      },    
    },
  }
  </script>